<!-- 巡检日历 -->
<script type="text/html" template>
    <link href='{{ layui.setter.base }}fullcalendar/core/main.css' rel='stylesheet' />
    <link href='{{ layui.setter.base }}fullcalendar/daygrid/main.css' rel='stylesheet' />
    <link href='{{ layui.setter.base }}fullcalendar/timegrid/main.css' rel='stylesheet' />
    <link href='{{ layui.setter.base }}fullcalendar/list/main.css' rel='stylesheet' />
    <link href='{{ layui.setter.base }}style/rili.css'  rel='stylesheet' />
    <link href='{{ layui.setter.base }}style/css/transaction/one.css' rel='stylesheet' />
</script>
    <div class="mian">
        <div class="boxs">
            <div class="rilselect">
                <form action="" class="layui-form" id='filter' lay-filter="filter">
                    <div class="layui-input-block" style="width: 120px;">
                        <select name="select_rili" lay-verify="required" id="select_rili" lay-filter="select_rili">
                            <option value="0">计划日历</option>
                            <option value="1">工单日历</option>
                        </select>
                    </div>
                </form>
            </div>
            <div style="height: 58px;display: flex;">
                <ul class="oultext_2">
                    <li><span></span>停用</li>
                    <li><span></span>启用</li> 
                </ul>
                <ul class="oultext">
                    <li><span></span>未开始</li>
                    <li><span></span>已完成</li>
                    <li><span></span>未完成</li>
                    <li><span></span>超时</li>

                    <!-- #FF4C4C -->
                </ul>
            </div>
        </div>
        <div id='calendar'></div>
    </div>
    <script type="text/html" id="TEST123">
            <div class="alert-box">
                <div class="alert-title">相关文档选择</div> 
                <div id="test1tree" class="demo-tree demo-tree-box" style="height: 200px; overflow-x: hidden"></div>
                <div class="footer" style="margin-top: 20px">
                    <button lay-submit lay-filter="comfirm" class="end layui-btn layui-btn-radius layui-btn-primary">确认</button>
                    <button class="cancel out layui-btn-container layui-btn-radius layui-btn-primary">取消</button>
                </div>
            </div>
        </script>
        <script src="../src/js/jquery-1.9.1.min.js"></script>
        <script src="../src/js/jquery-ui-1.10.2.custom.min.js"></script>
        <script src="../src/js/moment.min.js"></script>
        <script src="../src/js/jquery-ui.min.js"></script>
        <script src="../src/fullcalendar/core/main.js"></script>
        <script src="../src/fullcalendar/interaction/main.js"></script>
        <script src="../src/fullcalendar/daygrid/main.js"></script>
        <script src="../src/fullcalendar/timegrid/main.js"></script>
        <script src="../src/fullcalendar/list/main.js"></script>
    <script>
        layui.use(['jquery', 'form', 'layer', 'tree', 'api', 'view'], function () {

            var api = layui.api;
            var tree = layui.tree;
            var view = layui.view;
            var host = api.host;
            var table = layui.table;
            var laypage = layui.laypage,
                setter = layui.setter;
            var $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            layui.sessionData('select_rili', {
                key: 'rilitype',
                value: '0'
            })
            form.render();
            form.on('select(select_rili)', function (data) {
                var value = data.value
                layui.sessionData('select_rili', {
                    key: 'rilitype',
                    value: value
                })
                if(value==0){
                    $('.oultext_2').css('display','block')
                    $('.oultext').css('display','none')
                }else{ 
                    $('.oultext_2').css('display','none')
                    $('.oultext').css('display','block')
                }
                calendar.refetchEvents()
            });
            var odata = [
                {
                    title: '巡检All Day Event',
                    start: '2019-08-01',
                    type: 0,
                    "id": "7",
                },
                {
                    title: '巡检Long Event',
                    start: '2019-08-07',
                    end: '2019-08-10',
                    XUZHI: '巡检值',
                    "id": "7",
                },
                {
                    groupId: 999,
                    title: '巡检Repeating Event',
                    start: '2019-08-09T16:00:00',
                    id: '0123123',
                    type: 1,
                    "id": "7",
                },
                {
                    groupId: 999,
                    title: 'Repeating Event',
                    start: '2019-08-16T16:00:00',

                    id: '0123123'
                },
                {
                    title: 'Conference',
                    start: '2019-08-11',
                    end: '2019-08-13'
                },
                {
                    title: 'Meeting',
                    start: '2019-08-12T10:30:00',
                    end: '2019-08-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2019-08-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2019-08-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2019-08-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2019-08-12T20:00:00'
                },
            ]
            layui.link("../src/style/rili.css")
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid', 'list'],
                customButtons: {
                    myCustomButton: {
                        text: `未完成\n已完成\n未开始`,
                    }
                },
                header: {
                    left: 'today ',
                    center: 'title',
                    right: 'prev,next ,dayGridMonth,dayGridWeek,listDay'
                },
                buttonText: { today: "今天", month: "月", week: "周", day: "天" },
                timezone:'America/Chicago',
                locale: 'es', 
                // locales: [ 'es', "zh-cn" ],
                axisFormat: 'h(:mm)tt',
                eventLimitText:'更多',
                allDaySlot: false,//allday 整天的日程是否显示
                slotEventOverlap: false,//内容不重叠
                scrollTime: '08:00',//默认时间
                minTime: '00:00',//最小时间
                maxTime: '24:00',//最大时间 
                eventTimeFormat: { // like '14:30:00' 
                    hour: '2-digit', 
                    minute: '2-digit', 
                    hour12: false //设置时间为24小时 
                },
                fixedWeekCount: false,
                timeFormat: { agenda: 'H:mm{-H:mm}', month: 'H:mm' }, // uppercase H for 24-hour clock 时间格式 
                views: {
                    dayGridMonth: {
                        columnHeaderText: function(date) {  
                            var d=new Date()
                            var weekday=new Array(7)
                                weekday[0]="星期天"
                                weekday[1]="星期一"
                                weekday[2]="星期二"
                                weekday[3]="星期三"
                                weekday[4]="星期四"
                                weekday[5]="星期五"
                                weekday[6]="星期六"
                            return weekday[date.getDay()] 
                        }, 
                        titleFormat: function(res) {
                            var data=res.date.marker
                            return data.getFullYear()+'年'+ (data.getMonth()+1)+'日';
                        }, 
                    }, 
                    dayGridWeek:{
                        titleFormat: function(res) {
                            var start=res.start.marker
                            var end=res.end.marker
                            var startYear=start.getFullYear()+'年'
                            var endYear=end.getFullYear()+'年'
                            var startMonth=(start.getMonth()+1)+'月'
                            var endMonth=(end.getMonth()+1)+'月'
                            var wbstart=startMonth+start.getDate()+'日';
                            var wbend=endMonth+end.getDate()+'日';
                            if(start.getFullYear()<end.getFullYear()){ 
                                wbend=endYear+wbend
                            }
                            return startYear+wbstart+'–'+wbend;
                        },
                        columnHeaderText: function(date) { 
                            var month=date.getMonth()+1
                            var d=new Date()
                            var weekday=new Array(7)
                                weekday[0]="星期天"
                                weekday[1]="星期一"
                                weekday[2]="星期二"
                                weekday[3]="星期三"
                                weekday[4]="星期四"
                                weekday[5]="星期五"
                                weekday[6]="星期六"
                            return month+'/'+date.getDate()+weekday[date.getDay()]
                        },
                    },
                    listDay:{
                        listDayFormat:function(res){  
                            var date=res.date.marker 
                            var weekday=new Array(7)
                                weekday[0]="星期天"
                                weekday[1]="星期一"
                                weekday[2]="星期二"
                                weekday[3]="星期三"
                                weekday[4]="星期四"
                                weekday[5]="星期五"
                                weekday[6]="星期六"
                            return weekday[date.getDay()]
                        },
                        titleFormat: function(res) {
                            var data=res.date.marker 
                            return data.getFullYear()+'年'+ (data.getMonth()+1)+'月'+data.getDate()+'日';;
                        }, 
                    },
                },
           
                timeFormat:'H(:mm)',
                eventRender: function (info) {
                    var view = calendar.view;
                    if (view.type == 'listDay') {
                        var hour = info.event.start.getHours() > 9 ? info.event.start.getHours() : '0' + info.event.start.getHours()
                        var Minutes = info.event.start.getMinutes() > 9 ? info.event.start.getMinutes() : '0' + info.event.start.getMinutes()
                        var time = (hour + ':' + Minutes)
                        var textColor=info.event.textColor 
                        var divhtml = `<div class='daylist'><span>` + time + `</span><span style="color:`+textColor+`">` + info.event.title + `</span></div>`
                        $(info.el).html(divhtml)
                    }
                },
                noEventsMessage: '这段时间没有任何计划哦~',
                eventClick: function (info) {
                    if (calendar.view.type != 'listDay') {
                        calendar.changeView('listDay', info.event.start)
                    } else {
                        var el = info.el
                        var rilitype = layui.sessionData('select_rili').rilitype
                        var info_dats=info.event._def.extendedProps
                        var tcPlanId=info_dats.tcPlanId 
                        if(rilitype=='0'){ 
                            $(el).attr("lay-href", "patrol/branch-one/details/planId=" + tcPlanId + "/tcPlanStatus=" + info_dats.tcPlanStatus);
                        }else{
                            location.hash ='/patrol/popup/keep#?id='+tcPlanId 
                        } 
                    } 
                },
                events: function (fetchInfo, callback) {
                    var events = []
                    var url = ''
                    var rilitype = layui.sessionData('select_rili').rilitype
                    var data = null
                    switch (rilitype) {
                        case '0':
                            //计划日历
                            url = api.host + api.xjrl.selectMaintainMonthOrWeekParam
                            data = {
                                "endTime": fetchInfo.endStr,
                                "tcPlanType": 'I',
                                "startTime": fetchInfo.startStr,
                            }
                            break;
                        case '1':
                            //工单日历
                            url = api.host + api.xjrl.workSheetByMonthOrWeek
                            data = {
                                "endTime": fetchInfo.endStr,
                                "fil04": 'XJ',
                                "startTime": fetchInfo.startStr,
                            }
                            break;
                    }
                    view.req({
                        url, data: JSON.stringify(data),
                        type: 'POST',
                        contentType: 'application/json',
                        headers: { 'token': layui.sessionData(setter.tableName).token },
                    })
                        .done(function (res) {
                            if (res.code == '0') {
                                var odata = res.data
                                if (rilitype == '1') {
                                    for (var i = 0; i < odata.length; i++) {
                                        var textColor = ''
                                        switch (odata[i].fil05) {
                                            case '0':
                                                textColor = '#FF5300';
                                                break;
                                            case '1':
                                            case '2':
                                            case '3':
                                            case '4':
                                            case '5':
                                            case '6':
                                                textColor = '#3D8CC9';
                                                break;
                                            case '7':
                                                textColor = 'red';
                                                break;
                                            case '8':
                                            case '9':
                                                textColor = '#009F3C';
                                                break;
                                        }
                                        events.push({ 
                                                id: odata[i].tcReqId,
                                                title: odata[i].tcReqName,   
                                                end:odata[i].fil13!=''&& odata[i].fil13 !=null?odata[i].fil13:fetchInfo.endStr, 
                                                start: odata[i].fil12, 
                                                tcPlanId: odata[i].tcReqId,
                                                fil05: odata[i].fil05, 
                                                color: '#F7F7F7',
                                                textColor: textColor, // an option!
                                                backgroundColor: '#F7F7F7',
                                                overlap: false,
                                                allDay: false, 
                                            }) 
                                      
                                    }
                                } else {
                                    for (var i = 0; i < odata.length; i++) {
                                        var textColor = ''
                                        switch (odata[i].tcPlanStatus) {
                                            case '0':
                                                textColor = '#009F3C';
                                                break;
                                            case '1':
                                                textColor = '#3D8CC9'; 
                                                break; 
                                        }
                                        events.push({
                                                // id: odata[i].id?odata[i].id:0, 
                                                title: odata[i].tcPlanName,
                                                fil05: odata[i].fil05, 
                                                start: odata[i].tcPlanStart,
                                                end:odata[i].tcPlanEnd?odata[i].tcPlanEnd:'',   
                                                tcPlanStatus: odata[i].tcPlanStatus,
                                                tcPlanId: odata[i].tcPlanId, 
                                                textColor: textColor, // an option!  
                                                color: '#F7F7F7', 
                                                backgroundColor: '#F7F7F7', 
                                        }) 
                                    }
                                }
                                callback(events);
                            } else {
                                callback(events);
                            }
                        })
                },
            });
            calendar.render(); 
        });
    </script>